<template>
  <div class="conetr" v-loading="loading">
    <div class="center-board">
      <div class="center-title">
        <h3>详情</h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
      </div>
    </div>
    <el-form ref="formRef" :model="couponInfo" label-width="120px" :disabled="true">
      <el-form-item label="订单进度" prop="name">
        <el-steps style="width: 600px" :active="steps.active" align-center finish-status="success">
          <el-step title="创建订单" />
          <el-step title="上传材料" />
          <el-step title="材料审批" description="3-7个工作日" />
          <el-step title="完成" />
        </el-steps>
      </el-form-item>
      <el-form-item label="进度说明">
        <span :style="{ color: couponInfo.status == 4 ? 'red' : '#222' }">
          {{ steps.times }} {{ steps.describe[couponInfo.status] }}
        </span>
        <span v-if="couponInfo.status == 4" style="color: red; margin-left: 10px">
          驳回原因：{{ couponInfo.auditDesc }}
        </span>
      </el-form-item>
      <el-form-item label="房屋信息">{{ couponInfo.houseNeighborhood }}</el-form-item>
      <el-form-item label="签约时间">{{ couponInfo.linkContractTime }}</el-form-item>
      <el-form-item label="订单合同">
        <MultiImageUpload
          v-model="couponInfo.linkContractFile"
          disabled
          :showTip="false"
          :limit="couponInfo.linkContractFile?.length ?? 0"
        />
      </el-form-item>
      <el-form-item label="列表">
        <BasePageTable
          :table-data="couponInfo.coupons"
          :table-columns-data="tableColumnsData"
          :total="total"
          :loading="loading"
          style="max-width: 1000px"
        >
          <template #type="{ row }">
            {{ VOUCHER_TYPE_ENUM_JSON[row.type] }}
          </template>
        </BasePageTable>
      </el-form-item>
      <el-form-item label="核销总积分">{{ couponInfo.totalCoins }}</el-form-item>
      <el-form-item label="开工/安装时间">{{ couponInfo.operationStartTime }}</el-form-item>
      <el-form-item label="成果展示">
        <MultiImageUpload
          v-model="couponInfo.file"
          disabled
          :showTip="false"
          :limit="couponInfo.file?.length ?? 0"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import couponApi from "@/api/coupon/coupon";
import { VOUCHER_TYPE_ENUM_JSON } from "@/enums/coupon/coupon-usage";
const emit = defineEmits(["backTo"]);
const props = defineProps({
  couponArticle: {
    type: Object,
    default: null,
  },
});
const loading = ref(false);
const tableColumnsData = ref([
  {
    prop: "type",
    label: "代金券类型",
    showOverflowTooltip: true,
    customSlot: "type",
  },
  {
    prop: "couponCode",
    label: "代金券券码",
    showOverflowTooltip: true,
  },
  {
    prop: "coins",
    label: "核销积分",
    showOverflowTooltip: true,
  },
  {
    prop: "usageTime",
    label: "核销时间",
    showOverflowTooltip: true,
  },
  {
    prop: "merchantUserName",
    label: "核销人员",
    showOverflowTooltip: true,
  },
]);

const steps = ref({
  active: 1,
  describe: {
    1: "已创建代金券结算订单，请上传材料证明",
    2: "完成材料信息填写，等待审核 ",
    3: "审核通过，等待积分发放",
    4: "材料已被驳回，请重新上传材料",
    5: "积分已发放 ",
  },
  times: "",
});

const couponInfo = ref({
  houseNeighborhood: "",
});

function backTo() {
  emit("backTo");
}

function getCouponInfo() {
  try {
    couponApi.getOrder(props.couponArticle.id).then((res) => {
      couponInfo.value = res;
      couponInfo.value.file = JSON.parse(couponInfo.value.file);
      couponInfo.value.linkContractFile = JSON.parse(couponInfo.value.linkContractFile);
      if (res.status == 4) {
        steps.value.active = 1;
      } else if (res.status == 5) {
        steps.value.active = 4;
      } else {
        steps.value.active = res.status;
      }

      if (res.status == 1) {
        steps.value.times = res.createTime;
      } else {
        steps.value.times = res.updateTime;
      }
    });
  } catch {}
}
onMounted(async () => {
  getCouponInfo();
});
</script>
<style scoped lang="scss">
.conetr {
  padding: 10px;
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 20px;

  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
}
</style>
